@tailwind base;
@tailwind components;
@tailwind utilities;

/* 基础样式重置和现代化设置 */
:root {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 自定义颜色变量 */
  --primary-color: #3b82f6;
  --secondary-color: #8b5cf6;
  --accent-color: #ec4899;
}

/* 全局基础样式 */
@layer base {
  html {
    @apply scroll-smooth;
  }
  
  body {
    @apply font-sans bg-gray-50 text-gray-900;
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    /* 添加轻微的背景图案增加层次感 */
    background-image: radial-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
  }
}

/* 全局组件样式 */
@layer components {
  .btn-primary {
    @apply bg-blue-600 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:bg-blue-700 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }
  
  .card {
    @apply bg-white rounded-xl shadow-md border border-gray-100 p-6 transition-all duration-300 hover:shadow-lg;
  }
}

/* 全局工具类 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  
  .text-balance {
    text-wrap: balance;
  }
  
  .animate-float {
    animation: float 3s ease-in-out infinite;
  }
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
}

/* 焦点样式优化 */
*:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  @apply w-2 h-2;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 rounded-full hover:bg-gray-400 transition-colors;
}

#app {
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
}

/* 加载动画 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
